<template>
	<view style="background-color: #fff;" :style="{minHeight: $device.measure.windowHeight + 'px'}">
		<cu-custom :customStyle="{backgroundColor:'white',backgroundImage:'linear-gradient(45deg, #caff005e, #ff810073)'}" :isBack="true" :paddingHeight="80">
			<template #content>
				<view style="color:#555">{{pageParam.project_organize.title}}</view>
			</template>
		</cu-custom>
		
		<view style="position: fixed;width: 100%;">
			<image style="width: 100%;" mode="widthFix" src="http://www.apesk.net/cdn/static/img-back.png"></image>
		</view>
		
		<view style="position: relative;width: 100%;border-radius: 10px 10px 0 0;padding-top:450rpx;" >
		
				<!-- 兼职卡片 -->
				<view style="background-color: white;padding: 0 15px 5px 15px;opacity: 0.9;border-radius: 10rpx 10rpx 0 0;">
					<view style="padding: 8px 15px 0px 15px;">
	<!-- 					<view style="font-size: 38rpx;font-weight: bold;margin-bottom: 0rpx;">
							{{pageParam.project_organize.title}}
						</view> -->
						
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0px 15px 0px;15px">
							<view style="font-weight: bold;font-size: 17px;color:#555">{{pageParam.project_organize.title}}</view>
							<view style="font-size: 15px;margin:5px;color: #515151;">{{$dayjs(pageParam.project_organize.start_date).format('YYYY年MM月DD日')}}</view>
							<view style="color: #989898;font-size: 15px;font-size: 12px;margin-top: 5px;display: flex;justify-content: center;align-items: center;"><u-icon name="info-circle" color="#989898"></u-icon> 到场时间:上午10:00</view>
	
							<!-- 倒计时 -->
						<view style="color: white;margin:10px;display: flex;justify-content: center;align-items: center;background-color: #ff7300;border-radius: 100px;padding:5px 15px;box-shadow: 2px 2px 12px 0px #6f6f6f55;">
								报名截止:
								<u-count-down
										:time="30 * 60 * 60 * 1000"
										format="DD:HH:mm:ss"
										autoStart
										millisecond
										@change="onChange"
									>
										<view class="time">
											<text class="time__item">{{ timeData.days }}&nbsp;天</text>
											<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
											<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
											<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
										</view>
								</u-count-down>
							</view>
						</view>
						
<!-- 					    <view style="margin: 0 0rpx;;padding: 20rpx 10rpx; background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">
							<u-steps current="0" >
								<u-steps-item title="报名" desc="9:30"></u-steps-item>
								<u-steps-item title="签到" desc="10:30"></u-steps-item>
								<u-steps-item title="签离" desc="18:30"></u-steps-item>
								<u-steps-item title="验收" desc="20:30"></u-steps-item>
								<u-steps-item title="发薪" desc="23:35" ></u-steps-item>
							</u-steps>
						</view> -->
					</view>
					
					<view style="flex-wrap: wrap;display: flex;justify-content: flex-start;margin: 0 0rpx;padding: 10rpx 10rpx; background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">
						<view @click="async ()=>{
							$refs.enrollersPopup.show()
						}" style="position: relative;flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<view v-if="enrollsForReady(enrolls,1).length > 0" style="position: absolute;right: 0;top: -5rpx;padding: 0 10rpx;background-color: red;border-radius: 100rpx;color:white">{{enrollsForReady(enrolls,1).length}}</view>
							<i class="iconfont icon-renyuanpinggu" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">报名</text> 
						</view>

						<view @click="async ()=>{
							$refs.signEnrollPopup.show()
						}" style="position: relative;flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<view v-if="enrollsForReady(enrolls,2).length > 1" style="position: absolute;right: 0;top: -5rpx;padding: 0 10rpx;background-color: red;border-radius: 100rpx;color:white">{{enrollsForReady(enrolls,2).length}}</view>
							<i class="iconfont icon-rili" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">签到</text> 
						</view>
						<view @click="async ()=>{
							$refs.signdownEnrollPopup.show()
						}" style="position: relative;flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<view v-if="enrollsForReady(enrolls,3).length > 0" style="position: absolute;right: 0;top: -5rpx;padding: 0 10rpx;background-color: red;border-radius: 100rpx;color:white">{{enrollsForReady(enrolls,3).length}}</view>
							<i class="iconfont icon-jianzhi1" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">签离</text> 
						</view>
						
						<view @click="()=>{
							$refs.verifyPopup.show()
						}" style="position: relative;flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<view v-if="enrollsForReady(enrolls,4).length > 0" style="position: absolute;right: 0;top: -5rpx;padding: 0 10rpx;background-color: red;border-radius: 100rpx;color:white">{{enrollsForReady(enrolls,4).length}}</view>
							<i class="iconfont icon-xiazaiziliao" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">验收</text> 
						</view>
						<view @click="()=>{
							$refs.settlePopup.show()
						}" style="position: relative;flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<view v-if="enrollsForReady(enrolls,5).length > 0" style="position: absolute;right: 0;top: -5rpx;padding: 0 10rpx;background-color: red;border-radius: 100rpx;color:white">{{enrollsForReady(enrolls,5).length}}</view>
							<i class="iconfont icon-xiazaiziliao" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">发薪</text> 
						</view>
						<view style="flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<i class="iconfont icon-xiazaiziliao" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">消息</text> 
						</view>
						<view style="flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<i class="iconfont icon-wenjianziliao" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">资料</text> 
						</view>
						<view @click="showRecordPopup=true" style="flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<i class="iconfont icon-tousujianyi" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">记录</text> 
						</view>
						<view @click="showMonit=true" style="flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<i class="iconfont icon-jianzhi3" style="width: 30rpx;height:30rpx;"></i>
							<text style="padding-left: 8rpx;">报表下载</text> 
						</view>
						<view @click="onConfirm" style="flex:1 0 35%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
							<i class="iconfont icon-erweima" style="width: 30rpx;height:30rpx;color:coral;"></i>
							<text style="padding-left: 10rpx;">登记入群码</text> 
						</view>
					</view>
						
					<!--商户名片-->
					<view style="display: flex;justify-content: space-between;padding: 15px 0 0 0;">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<u-avatar src="http://www.apesk.net/cdn/static/img-back.png" size="40" fontSize="34"></u-avatar>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 30rpx;margin-bottom: 14rpx;">无名用户</view>
								<view style="font-size: 22rpx;color: #b5b5b5;">3天之前 05:13</view>
							</view>
						</view>
						
						<view style="display: flex;align-items: center;">
							<view style="display: flex;align-items: center;padding: 14rpx 26rpx;background-color: #fffcd4;color: #ff9d00;border-radius: 10rpx;">
								<u-icon name="share-square" color="#ff9d00"></u-icon>
								<span style="font-size: 26rpx;font-weight: bold;">邀请填写</span>
							</view>
						</view>	
					</view>
					
					<view style="padding: 10px;">
						<span style="
						font-size: 24rpx; 
						color:#b6b6b6;"
						>广东掌聘人力资源有限公司</span>
						<span style="
							background-color: #fff6c7;
							border-radius: 100rpx;
							padding: 6rpx 20rpx;
							margin-left: 14rpx;
							text-align: center;
							color: #ff8725;
							font-size: 20rpx;
							">企业认证</span>
					</view>
				</view>
				
				
				<!-- 兼职详情卡片 -->
	
				
	<!-- 			<view style="padding: 0 10px;">
					<u-read-more :fontSize="12" ref="uReadMore" :toggle="true" showHeight="50">
						<view style="text-indent: initial;line-height: 50rpx;font-size: 12px;">
							<u-parse  @ready="load" content="
								<p><strong>【人数】</strong>传菜员多名、服务员多名</p>
								<p><strong>【班次】</strong>17:00-23:30，提前1小时过来吃饭换衣服</p>
								<p><strong>【待遇】</strong>熟手17元/钟，新手16元/钟，另外包餐，可包接送</p>
								<p><strong>【福利】</strong>报名成功送兼职卡一张，以后每次带卡兼职加多5元</p>
								<p><strong>【工作地点】</strong>顺德乐从华美达酒店（水藤）</p>
								<p><strong>【工作内容】</strong></p>
								<p>服务员：餐前准备，客人接待，餐饮服务，餐后整理工作等</p>
								<p>传菜员：传菜、上菜等</p>
								<p>【岗位要求】16周岁以上，男女不限，工资以工时为准，无夸张染发，女生无美甲，穿全黑鞋子袜子上岗</p>
								<p>【报名方式】名字+电话+年龄+性别，发到微信：mywayjob </p>
								<p>请各位及时签到打卡</p>
							"
							:selectable="true"
							></u-parse>
						</view>
					</u-read-more>
				</view> -->
	
				<!-- 人员管理卡片 -->
				<u-sticky  :offsetTop="40" :customNavHeight="0">
					<view style="border-bottom: solid 1rpx #eee;background-color: #fff;display: flex;justify-content: center;padding: 0px 0;">
						<u-tabs :list="list2" :index="currentTab2Index" @click="clickTab2" lineWidth="28" lineHeight='3'
							:activeStyle="{fontSize:'15px',fontWeight:'bold'}"
						></u-tabs>
					</view>
					
					<view style="margin: 0 0rpx;padding:0 5rpx;background-color:white;">
	<!-- 					<view class="avatar" style="display: inline-block;padding: 6rpx 10rpx;border-radius: 5px;box-shadow: rgb(186 186 186 / 21%) 0px 0px 10px 0px;border: solid 1rpx #e8e8e8;">
							<view style="display: flex;justify-items: center;">
								<view style="border: solid 1rpx #dadada;display: inline-block;"><u-icon name="checkbox-mark"></u-icon></view>
								<text style="font-size: 9px;margin-left: 5rpx;">
									批量操作
								</text>
							</view>
						</view> -->
					</view>
				</u-sticky>
			
			<view class="work-list" style="background-color: #f4f7f8;padding:1rpx 20rpx">
<!-- 				<view style="background-color: #fbfbfb;flex-direction: column;display: flex;;justify-content: flex-start;flex-wrap:wrap;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 41%) 0px 0px 7px 1px;border: solid 1rpx #eee;" >
					<view style="line-height: 8px;padding: 10px;display: flex;justify-content: space-between;align-items: center;border-bottom: solid 1rpx #eee;">
						<view style="font-size: 13px;"><text>领队</text></view>
					</view>
					
					<view v-if="leaders.length == 0" style="color: #777;padding: 20px;text-align: center;">还没有指定领队</view> 
					
					
					<view style="width: 100%;flex-direction: column;display: flex;justify-content: flex-start;padding: 0px 0;background-color: #fbfbfb;">
						<view class="avatar"  @click="onAvatarClick(enroll,zi)" style="flex: 0 0 100%;;display: flex;justify-content: center;" v-for="(enroll,zi) in leaders">
							<user-avatar :isOK="true" :enroll="enroll"></user-avatar>
						</view>
					</view>
				</view> -->
				
				<template v-for="(job,index) in jobs">
					<view style="background-image: linear-gradient(90deg,#e9eec5,#fffde1);overflow: hidden;;position: relative;flex-direction: column;display: flex;;justify-content: flex-start;flex-wrap:wrap;margin: 20rpx 0rpx;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 1px 7px 0px;border: solid 1rpx #eee;" >
						<!-- <view style="flex:0 0 0;" @click="onMultiSelect">{{isSelectMode?'操作':'多选'}}</view> -->
						<view style="left:0;bottom:50%;position: absolute;z-index:0;transform: rotate(30deg) translate(0,0%) scale(0.7);" >
							<i class="iconfont icon-wenli" style="font-size:300rpx;color:#ffffff90;"></i> 
						</view>
						<!-- 工作项目标题 -->
						<view style="z-index: 2;line-height: 8px;display: flex;justify-content: space-between;align-items: center;border-bottom: solid 1rpx #eee;">
							
							<view style="flex: 1 0 0%;display: flex;flex-direction: column;padding: 2px;">
								<view style="padding: 8px;display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;">		
									<!-- 职位名称 -->
									<view style="flex: 1 1 10%;display: flex;justify-content: space-between;">
										<view style="font-size: 13px;font-weight: bold;white-space: nowrap;"><text>{{job.name}}</text></view>
									</view>
									
									<!-- 时间 -->
									<view style="flex:0 0 45%;text-align: right;color:#757575">
										<view style="line-height: 13px;font-size: 13px;font-weight: bold;white-space: nowrap;"><text>{{fixedTime(job.start_time)}}-{{fixedTime(job.end_time)}}</text></view>
									</view>
									
									<view style="flex:1 1 10%;display: flex;justify-content: flex-end;padding:3px">
										<u-icon name="list-dot"></u-icon>
										<span style="padding:3px;white-space: nowrap;">批量</span>
									</view>
								</view>
								
								<view style="display: flex;justify-content: space-between;align-items:center;padding:0px 3px;">
									<view>
										<view style="margin: 5px 5px;padding: 5px 10px;border-radius: 50px;color:white;background-color: #ffa200;font-size: 10px;display: inline-block">
											<text>男生</text>
										</view>
										<view style="margin: 5px 5px;padding: 5px 10px;border-radius: 50px;color:white;background-color: #ffa200;font-size: 10px;display: inline-block">
											<text>男生</text>
										</view>
										<view style="margin: 5px 5px;padding: 5px 10px;border-radius: 50px;color:white;background-color: #ffa200;font-size: 10px;display: inline-block">
											<text>男生</text>
										</view>
									</view>
									
									<view style="display: flex;justify-content: space-between;align-items:flex-start;padding-top: 5px;">
										<!-- 工资 -->
										<view style="font-weight: bold;color: #f00;font-size: 13px;white-space: nowrap;">
											<span>{{job.price}}元/{{job.price_type}}</span>
											<span>/{{job.settle_type}}</span>
										</view>
										<!-- 人数 -->
										<span style="font-size: 12px;color: #9c9c9c;padding-left: 5px;white-space: nowrap;">1/{{job.num}}人</span>
									</view>
								</view>
							</view>
							
						</view>
			 
						
						<!-- 空提示 -->
						<view v-if="enrollsByState(enrolls,currentTab2Index,job.id).length == 0" style="color: #777;padding: 20px;text-align: center;background-color: #fbfbfb;">没有成员</view> 
						
						<!-- 人员列表区 -->
						<view style="width: 100%;display: flex;display: flex;flex-direction: column;justify-content: flex-start;padding: 0px 0;background-color: #fbfbfb;">
							<view class="avatar" @click="onAvatarClick(enroll,zi)" style="position: relative;;flex: 0 0 100%;;display: flex;justify-content: center;" v-for="(enroll,zi) in enrollsByState(enrolls,currentTab2Index,job.id)">
								<view v-if="enroll.is_leader" style="border-radius: 0 5px 5px 0;position: absolute;z-index: 2;left: 0;top:50%;height: 20px;padding: 0 7px;background-color: #ff000077;color: white;">
									领队
								</view>
								<user-avatar 
									:enroll="enroll"
									:isOK="isOK(enroll,currentTab2Index)"
									:selected="selected(enroll)"
									:isSelectMode="isSelectMode"
								>
									<template #label>
										<view style="border-radius: 5px;box-shadow: rgb(186 186 186 / 21%) 0px 0px 10px 0px;border: solid 1rpx #e8e8e8;"
											:style="{
													backgroundColor:labelBackgroundColor(enroll,currentTab2Index)
												}
											">
											<text style="font-size: 11px;white-space:nowrap;box-sizing: content-box;margin: 4rpx 0px;padding:0 5px;"
												:style="{
													color:labelColor(enroll,currentTab2Index),
													backgroundColor:labelBackgroundColor(enroll,currentTab2Index)
													}"
											>
												{{labelText(enroll,currentTab2Index)}}
											</text>
										</view>
									</template>
								</user-avatar>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		
<!-- 		<view style="height:60px">
			
		</view> -->
<!-- 		<view style="padding:10px;height:60px;width:100%;position:fixed;bottom:0;background-color: #fafafa;z-index:99">
			<view style="align-items: center;display:flex;justify-content: center;background-color: white;height: 100%;">
				上传活动消息
			</view>
		</view> -->
		
		<!-- 报名确认对话框 -->
<!-- 		<u-modal :show="showModal" width="320px"
			closeOnClickOverlay
			@close="showModal=false"
			@confirm="onModalConfirm">
		</u-modal> -->
	
		<enrollersPopup ref="enrollersPopup"></enrollersPopup>
		<signEnrollPopup ref="signEnrollPopup"></signEnrollPopup>
		<signdownEnrollPopup ref="signdownEnrollPopup"></signdownEnrollPopup>
		<verifyPopup ref="verifyPopup"></verifyPopup>
		<settlePopup ref="settlePopup"></settlePopup>
		
		
		
		<u-popup
			:show="showRecordPopup"
			closeOnClickOverlay
			overlay
			round='10'
			@close="showRecordPopup=false"
			mode="bottom"
			closeable
		>
			<!-- <view style="position: fixed;height: 100%;width: 100%;top: 0;" @touchmove.stop.prevent="() => {}"></view> -->
			<view  style="margin: 0rpx;padding:1rpx" @touchmove.stop.prevent="() => {}">
				<view style="padding:20rpx 10rpx;text-align: center;font-weight: bold;" @touchmove.stop.prevent="() => {}"> 选择列表</view>
				<scroll-view scroll-y style="max-height: 1000rpx;">
					<view style="margin:0 20rpx;padding:1rpx">
						<view v-for="i in 15" style="display: flex;justify-content: space-between;padding: 15px 0 0 0;">
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<u-avatar src="http://www.apesk.net/cdn/static/img-back.png" size="40" fontSize="34"></u-avatar>
								<view style="margin-left: 20rpx;">
									<view style="font-size: 30rpx;margin-bottom: 14rpx;">无名用户</view>
									<view style="font-size: 22rpx;color: #b5b5b5;">3天之前 05:13</view>
								</view>
							</view>
							
							<view style="display: flex;align-items: center;justify-content: center;">
								<view style="display: flex;align-items: center;padding: 14rpx 26rpx;background-color: #fffcd4;color: #ff9d00;border-radius: 10rpx;">
									<i class="iconfont icon-tianxin_jianzhi_queren" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
									<span style="font-size: 26rpx;font-weight: bold;">验收通过</span>
								</view>
							</view>	
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-modal
			:show="showMonit"
			:closeOnClickOverlay="false"
			@close="showMonit=false"
			@confirm="showMonit=false"
		>
			是否启动模拟
		</u-modal>
		
		<u-modal 
			:show="showModal"
			width="300px"
			:closeOnClickOverlay="true"
			@close="showModal=false"
			@confirm="onModalConfirm"
		>
			<view style="width: 100%;">
				<view style="font-weight: bold;">长按添加招聘员微信:</view>
				<view>
					<image mode="aspectFit" class="official-img" src="@/static/wx.jpg" show-menu-by-longpress="true">
					</image>
				</view>
			</view>
			<template #confirmButton>
				<u-button
					text="发送到微信"
					type="success"
					shape="circle"
					@click="onModalConfirm"
				></u-button>
			</template>
		</u-modal>
		 
		 <!-- 调岗选项 -->
		<u-popup :show="showSchedulePopup" @close="showSchedulePopup=false">
			<view style="margin: 0px;padding: 10px 10px;border-bottom: solid 1rpx #e2e2e2;">
				<view  class="bottom_line" style="color:#676767;display: flex;justify-content: center;padding: 0rpx 10rpx 20rpx 10rpx;font-size: 15px;">
					<!--<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="30"></u-icon> 邀请填写</view>
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="30"></u-icon> 数据表格</view>
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="30"></u-icon> 更多</view>
					 -->
					 <view>岗位确认</view>
				</view>
				
				<view v-if="currentEnroll" v-for="(enroll,index) in (isSelectMode? selectItems:[currentEnroll])" class="bottom_line" style="display: flex;justify-content: flex-start;align-items: center;">
					<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
						<view style="margin: 5px;"><u-avatar size="35" :src="absUrl(enroll.enroller.head_icon_url)"></u-avatar></view>
						<text>{{enroll.enroller.name}}</text>
					</view>
					<view style="flex:0 0 60%;">
						<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
							<view style="margin: 2px;display: flex;">
								<text>性别:&nbsp;{{enroll.enroller.sex}}</text>
								<text style="margin-left: 20px;">年龄:&nbsp;{{enroll.enroller.old}}</text>
							</view>
							<view style="margin: 2px;">电话:&nbsp;{{enroll.enroller.phone_number}}</view>
							<view style="margin: 2px;">身份证:&nbsp;{{enroll.enroller.id_number}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 岗位选项 -->
			<view  style="flex-direction: column;display: flex;margin:10px 10px;">
				<view class="work-list" style="background-color: white;z-index: 22;position: relative;">
					<view @click="_onScheduleJob(job)" :index="index" v-for="(job,index) in jobs" style="padding: 10px;display: flex;justify-content: flex-start;align-items: center;border-bottom: solid 1rpx #eee;">
						
							<view style="width:28%;font-size: 14px;">{{job.name}}</view>
							<view style="width:37%;font-size: 14px;text-align: center;">
								<view>{{fixedTime(job.start_time)}} 上班</view>
								<view>{{fixedTime(job.end_time)}} 下班</view>
							</view>
							<view style="width:35%;text-align:right;"> 
								<span style="flex:0 0 40%;font-size: 28rpx;color: #f00;">{{job.price}}元/{{job.price_type}}/{{job.settle_type}}</span>
								<!-- <span style="font-size: 24rpx;color: #9c9c9c;">{{item.num}}人</span> -->
							</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 人员操作选项 -->
		<u-popup :show="showPopup" @close="showPopup=false">
			<view v-if="currentEnroll"  style="flex-direction: column;display: flex;">
				<!-- 人员名片 -->
				<view  style="margin: 0px;" >
					<view v-for="(enroll,index) in (isSelectMode? selectItems:[currentEnroll])" class="bottom_line" style="padding: 10px 10px;display: flex;justify-content: flex-start;align-items: center;">
						<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
							<view style="margin: 5px;">
								<u-avatar size="40" :src="absUrl(enroll.enroller.head_icon_url)"></u-avatar>
								</view>
							<text>{{enroll.enroller.name}}</text>
						</view>
						<view style="flex:0 0 60%;">
							<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
								<view style="margin: 2px;display: flex;">
									<text>性别:&nbsp;{{enroll.enroller.sex}}</text>
									<text style="margin-left: 20px;">年龄:&nbsp;{{enroll.enroller.old}}</text>
								</view>
								<view style="margin: 2px;">电话:&nbsp;{{enroll.enroller.phone_number}}</view>
								<view style="margin: 2px;">身份证:&nbsp;{{enroll.enroller.id_number}}</view>
							</view>
						</view>
					</view>
				
		<!-- 			<view v-if="!isSelectMode" style="color:#676767;display: flex;justify-content: space-between;padding: 20rpx 20rpx 0rpx 20rpx;font-size: 13px;">
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="30"></u-icon> 邀请填写</view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="30"></u-icon> 数据表格</view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="30"></u-icon> 更多</view>
					</view> -->
				</view>
				
				<!-- 操作选项 -->
				<view style="background-color: white;z-index: 22;position: relative;border-top: solid 1rpx #eee;">
					<view  v-if="!isSelectMode" class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">修改信息</view>
					</view>
					<!-- v-if="enrollState(currentEnroll) == -1" -->
					<view  @click="onAssignJob" 
						class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">{{currentEnroll.state_step == 1?'分配岗位':'调整岗位'}}</view>
					</view>
					<view @click="onSignUp"  
						v-if="currentEnroll.state_step == 2 && currentTab2Index == 1" class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">签到</view>
					</view>
					<view @click="onSignDown"
						v-if="currentEnroll.state_step == 3 && currentTab2Index == 2" class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">签离</view>
					</view>
					<view @click="onVerifiy"
						v-if="currentEnroll.state_step == 4 && currentTab2Index == 3" class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">验收</view>
					</view> 
					 
					<view  @click="onGiveSalary" 
						v-if="currentEnroll.state_step == 5 && currentTab2Index == 4" class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">发薪</view>
					</view>
					
					<view  @click="onAssignLeader"
						v-if="!currentEnroll.is_leader" class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">设置为领队</view>
					</view>
					
					<view  @click="onUnassignLeader"
						v-if="!!currentEnroll.is_leader" class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">撤销领队</view>
					</view>
					
					<view @click="onClearance" 
						class="bottom_line" style="text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">清退</view>
					</view>
					
					<view @click="onCancleMutilSel" 
						v-if="isSelectMode"  class="bottom_line" style="color: red;text-align: center;margin: 0px;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;">
						<view style="flex:1 0 0;font-size: 14px;">取消</view>
					</view>
				</view>
			</view>
		</u-popup>
				
		<!-- <u-button @click="show = !show">打开</u-button> -->
		<u-calendar @close="dateClose" color="#ff8725" :show="show" :closeOnClickOverlay="true"></u-calendar>
		 
	</view>
</template>

<script>
	//import jobs from '../remember_data.js'
	import {useProjectRemembersStore} from '@/stores/project_remembers.js'
	import jobData from '@/utils/data/workData.js'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'
	import memberManager from './member-manager.js'
	import {usePageParamStore} from '@/stores/pageParams.js'
	import userAvatar from './user-avatar.vue'
	
	import enrollersPopup from './enrollersPopup.vue'
	import signEnrollPopup from './signEnrollPopup.vue'
	import signdownEnrollPopup from './signdownEnrollPopup.vue'
	import verifyPopup from './verifyPopup.vue'
	import settlePopup from './settlePopup.vue'
	
	import {useTaskStore} from './task.js'
	
	import {provide} from 'vue'
	
	export default {
		components:{
			userAvatar,
			enrollersPopup,
			signEnrollPopup,
			signdownEnrollPopup,
			verifyPopup,
			settlePopup
		},
		mixins:[jobData,timeTextFormat,memberManager],
		setup() {
			let remembers = useProjectRemembersStore()
			let pageParam = usePageParamStore()
			
			let aabb = useTaskStore()
			
			provide('task',aabb)
			
			return {remembers,pageParam,aabb}
		},
		// provide(){
		// 	return {
		// 		aabb:this.task
		// 	}
		// },
		onInit(){
			//console.log(this.$refs)
		},
		onLoad(){
			//console.log(this.$refs)
		},  
		onShow(){
			let that = this
			this.$nextTick(async ()=>{
				    
				let res = await that.$http.get('/manager/job/task/details',{
					params:{
						job_task_id:that.pageParam.project_organize.id
					}
				})
  
				that.pageParam.project_organize = res.data
				that.jobs = res.data.jobs
				that.enrolls = res.data.enrolls
				
				Object.assign(that.aabb,res.data)
				that.task = that.aabb
			})
		},
		data() {
			return {
				isSelectMode:false,
				// task:{},
				jobs:[],
				enrolls:[],
				showRecordPopup:false,
				showMonit:false,
				showPopup:false,
				showSchedulePopup:false,
				selectItems:[],
				list1: [{
					    name: '报名',
					}, {
						name: '执行'
					}],
				list2: [
					{
						name: '确认',
						badge:{
							value:3
						}
					}, {
						name: '签到'
					}, {
						name: '签退'
					}, {
						name: '验收'
					}, {
						name: '发薪'
					}],
				toggle:false,
				showModal:false,
				currentTab1Index:0,
				currentTab2Index:0,
				currentTabsDate:0,
				currentSelectSortItem:0,
				currentEnroll:null,
				currentEnrollIndex:null,
				show:false,
				showSortItemSheet:false,
				title: 'Hello',
				timeData: {
					day:1,
					hours:30,
					minutes:50,
					seconds:21
				}
			}
		},
		onReady(){
			console.log(this.$refs) 
			this.require()
		},
		computed: {
			selected(enroll) {
				return (enroll)=>{
					return this.selectItems.findIndex(item=>item.id==enroll.id) >= 0
				}
			}
		},
		methods: {
			isSameState(item)
			{
				console.log(this.selectItems.length)
				
				return this.selectItems.length == 0 ? true : 
				this.selectItems[0].state_step == item.state_step
			},
			onMultiSelect(){
				if(this.isSelectMode && this.selectItems.length > 0)
					this.showPopup = true
				else
				    this.isSelectMode = !this.isSelectMode
			},
			onCancleMutilSel()
			{
				this.showPopup = false
				this.isSelectMode = false
				this.selectItems = []
			},
			clickTabs1(item){
				console.log(item)
				this.currentTab1Index = item.index
			},
			clickTab2(item){
				this.currentTab2Index = item.index
			},
			require(){
				let that = this
				this.$nextTick(()=>{
					console.log(that.$refs)
				})
				//await this.$refs.loginGurad.require()
				
				// let res = await this.$http.get('/job/task/jobs/enrolls?job_project_id=15')
				// this.jobs = res.data.data.jobs
				// console.log(this.jobs)
				// console.log(res.data.data)
			},
			onActionClick(item,index){
				this.showPopup = true
				this.currentEnroll = item
				this.currentEnrollIndex = index
				
			},
			onAvatarClick(enroll,index){
				//this.showSchedulePopup=true
				console.log(enroll)
				this.currentEnroll = enroll
				this.currentEnrollIndex = index
				
				if(this.isSelectMode)
				{
					let itemIndex = this.selectItems.findIndex(item=> item.id == enroll.id)
					console.log(itemIndex)
					
					if(itemIndex >= 0)
						this.selectItems.splice(itemIndex,1);
					else
					{
						if(this.isSameState(this.currentEnroll))
						{
							this.selectItems.push(this.currentEnroll) 
						}else
						{
							uni.showToast({
								title:'不能选择状态不一样的角色',
								duration: 1000
							})
						}
					}

					console.log(this.currentEnroll)
					console.log(this.selectItems)
				}else
				{
					this.showPopup = true
				}
			},
			onAssignJob(){
				this.showSchedulePopup = true
				this.showPopup = false
			},
			async _operate(type,...args){
				this.showSchedulePopup = false
				await this.operate(type,
					this.isSelectMode ?
					this.selectItems.map(i=>i.id) : 
					[this.currentEnroll.id]
				,...args)
			
				this.showPopup = false
			},
			async _onScheduleJob(job)
			{
				await this.onScheduleJob(job.id)
			},
			onChange(e) {
				this.timeData = e
			},
			load() {
				this.$refs.uReadMore.init();
			},
			click(item) {
				console.log(item)
				
				if(item.index == 3)
				{
					this.show = true
				}
			},
			dateClose(){
				this.show = false
			},
			onConfirm(){
				this.showModal = true
				console.log('aa')
			},
			onModalConfirm(){
				let that = this
				
				// this.$wx.updateAppMessageShareData({ 
				// 	title: '哈哈哈', // 分享标题
				// 	desc: '大家好', // 分享描述
				// 	link: 'www.apesk.net/h5/#/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				// 	imgUrl: 'http://www.apesk.net/cdn/static/img-back.png', // 分享图标
				// 	success: function () {
				// 	  console.log('听说设置成功..')
				// 	},
				// 	fail() {
				// 		console.log('听说设置失败..')
				// 	},
				// 	complete() {
				// 		that.showModal = false
				// 	}
				// })
				
				// #ifdef MP-WEIXIN
					wx.downloadFile({
					   url: 'http://www.apesk.net/cdn/static/img-back.png',
					   success: (res) => {
						 wx.showShareImageMenu({
						   path: res.tempFilePath
						 })
					   }
					})
				// #endif
			}
		}
	}
</script>

<style scoped>
	/deep/ .uni-scroll-view {
			/* 在真正的滚动区域设置 阻断滚动穿透 */
			overscroll-behavior-y: contain !important;
	}
		
	.avatar {
		padding: 5px;
		border-bottom: solid 1px #eee;
	}
	
	.avatar:last-child {
		border-bottom: none;
	}
	
	.work-list :deep(.u-cell__body) {
		padding: 5px 10px 5px 10px;
	}
	
	.work-list :deep(.u-collapse-item__content__text) {
		padding: 0px 0px 0px 0px;
	}
	
	.avatar:active {
		/* transform: scale(0.98); */
	}
</style>